<template>
  <div id="orders">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="min-width: 1124px; margin-top: 20px;">
      <el-input placeholder="请输入内容"
                class="search"
                v-model="pagination.query">
        <el-button slot="append"
                   icon="el-icon-search"
                   @click.native="getOrderList"></el-button>
      </el-input>

      <el-table :data="ordersList.goods"
                stripe
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="#">
        </el-table-column>
        <el-table-column label="订单编号"
                         property="order_number">
        </el-table-column>
        <el-table-column label="订单价格"
                         property="order_price">
        </el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag :type="scope.buy_status ? 'primary' : 'info'"
                    effect="dark">
              {{ scope.buy_status ? '已付款' : '未付款' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货">
          <template slot-scope="scope">
            <i v-show="scope.row.is_send"
               style="color: #67C23A"
               class="el-icon-circle-check"></i>
            <i v-show="!scope.row.is_send"
               style="color: #909399"
               class="el-icon-circle-close"></i>
          </template>
        </el-table-column>
        <el-table-column label="下单时间">
          <template v-slot="scope">
            {{scope.row.create_time | initDate}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit"
                       @click.native="open('set',scope)"
                       type="primary"></el-button>
            <el-button icon="el-icon-location"
                       @click.native="open('status',scope)"
                       type="success"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pagination.pagenum"
                     :page-sizes="[5, 10, 15]"
                     :page-size="pagination.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="ordersList.total">
      </el-pagination>
    </el-card>

    <el-dialog title="修改地址"
               :visible.sync="set.dialogFormVisible">
      <el-form :model="set.form"
               :rules="set.rules"
               status-icon>
        <el-form-item label="省事区县"
                      prop="value"
                      :label-width="'120px'">
          <el-cascader v-model="set.form.value"
                       :options="options"
                       :props="{ expandTrigger: 'hover' }"
                       @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址"
                      prop="info"
                      :label-width="'120px'">
          <el-input v-model="set.form.info"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="set.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="set.dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="物流进度"
               :visible.sync="status.dialogFormVisible">
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in status.list"
                          :key="index"
                          :timestamp="activity.ftime">
          {{activity.context}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>


<script>
export default {
  props: [],
  data() {
    return {
      set: {
        dialogFormVisible: false,
        form: {
          value: [],
          info: '',
        },
        rules: {
          value: [{ required: true, message: '请输入地址', trigger: 'blur' }],
          info: [
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
        },
      },
      status: {
        list: [],
        dialogFormVisible: false,
        form: {},
        rules: {},
      },
      ordersList: {},
      pagination: {
        query: '',
        pagenum: 1,
        pagesize: 10,
      },
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致',
                },
                {
                  value: 'fankui',
                  label: '反馈',
                },
                {
                  value: 'xiaolv',
                  label: '效率',
                },
                {
                  value: 'kekong',
                  label: '可控',
                },
              ],
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航',
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航',
                },
              ],
            },
          ],
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                {
                  value: 'layout',
                  label: 'Layout 布局',
                },
                {
                  value: 'color',
                  label: 'Color 色彩',
                },
                {
                  value: 'typography',
                  label: 'Typography 字体',
                },
                {
                  value: 'icon',
                  label: 'Icon 图标',
                },
                {
                  value: 'button',
                  label: 'Button 按钮',
                },
              ],
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                {
                  value: 'radio',
                  label: 'Radio 单选框',
                },
                {
                  value: 'checkbox',
                  label: 'Checkbox 多选框',
                },
                {
                  value: 'input',
                  label: 'Input 输入框',
                },
                {
                  value: 'input-number',
                  label: 'InputNumber 计数器',
                },
                {
                  value: 'select',
                  label: 'Select 选择器',
                },
                {
                  value: 'cascader',
                  label: 'Cascader 级联选择器',
                },
                {
                  value: 'switch',
                  label: 'Switch 开关',
                },
                {
                  value: 'slider',
                  label: 'Slider 滑块',
                },
                {
                  value: 'time-picker',
                  label: 'TimePicker 时间选择器',
                },
                {
                  value: 'date-picker',
                  label: 'DatePicker 日期选择器',
                },
                {
                  value: 'datetime-picker',
                  label: 'DateTimePicker 日期时间选择器',
                },
                {
                  value: 'upload',
                  label: 'Upload 上传',
                },
                {
                  value: 'rate',
                  label: 'Rate 评分',
                },
                {
                  value: 'form',
                  label: 'Form 表单',
                },
              ],
            },
            {
              value: 'data',
              label: 'Data',
              children: [
                {
                  value: 'table',
                  label: 'Table 表格',
                },
                {
                  value: 'tag',
                  label: 'Tag 标签',
                },
                {
                  value: 'progress',
                  label: 'Progress 进度条',
                },
                {
                  value: 'tree',
                  label: 'Tree 树形控件',
                },
                {
                  value: 'pagination',
                  label: 'Pagination 分页',
                },
                {
                  value: 'badge',
                  label: 'Badge 标记',
                },
              ],
            },
            {
              value: 'notice',
              label: 'Notice',
              children: [
                {
                  value: 'alert',
                  label: 'Alert 警告',
                },
                {
                  value: 'loading',
                  label: 'Loading 加载',
                },
                {
                  value: 'message',
                  label: 'Message 消息提示',
                },
                {
                  value: 'message-box',
                  label: 'MessageBox 弹框',
                },
                {
                  value: 'notification',
                  label: 'Notification 通知',
                },
              ],
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'menu',
                  label: 'NavMenu 导航菜单',
                },
                {
                  value: 'tabs',
                  label: 'Tabs 标签页',
                },
                {
                  value: 'breadcrumb',
                  label: 'Breadcrumb 面包屑',
                },
                {
                  value: 'dropdown',
                  label: 'Dropdown 下拉菜单',
                },
                {
                  value: 'steps',
                  label: 'Steps 步骤条',
                },
              ],
            },
            {
              value: 'others',
              label: 'Others',
              children: [
                {
                  value: 'dialog',
                  label: 'Dialog 对话框',
                },
                {
                  value: 'tooltip',
                  label: 'Tooltip 文字提示',
                },
                {
                  value: 'popover',
                  label: 'Popover 弹出框',
                },
                {
                  value: 'card',
                  label: 'Card 卡片',
                },
                {
                  value: 'carousel',
                  label: 'Carousel 走马灯',
                },
                {
                  value: 'collapse',
                  label: 'Collapse 折叠面板',
                },
              ],
            },
          ],
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components',
            },
            {
              value: 'sketch',
              label: 'Sketch Templates',
            },
            {
              value: 'jiaohu',
              label: '组件交互文档',
            },
          ],
        },
      ],
    }
  },
  filters: {
    initDate(val) {
      let now = new Date(val)
      let n = now.getFullYear() + '',
        y = now.getMonth() + 1 + '',
        r = now.getDate() + '',
        s = now.getHours() + '',
        f = now.getMinutes() + '',
        m = now.getSeconds() + ''
      return `${n.padStart(2, 0)}-${y.padStart(2, 0)}-${r.padStart(
        2,
        0
      )} ${s.padStart(2, 0)}:${f.padStart(2, 0)}:${m.padStart(2, 0)}`
    },
  },
  methods: {
    async open(type, item) {
      this.scope = item
      this[type].dialogFormVisible = true
      if (type == 'status') {
        const { data: res } = await this.$http.get(
          `/kuaidi/${item.row.order_number}`
        )
        // console.log(res)
        this[type].list = res.data
      }
    },
    handleChange(value) {
      console.log(value)
    },
    handleSizeChange(val) {
      this.pagination.pagesize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pagination.pagenum = val
      this.getOrderList()
    },
    async getOrderList() {
      const { data: res } = await this.$http.get('orders', {
        params: {
          ...this.pagination,
        },
      })
      this.ordersList = res.data
      //   console.log(res)
    },
  },
  computed: {},
  watch: {},
  created() {
    this.getOrderList()
  },
  mounted() {},
}
</script>


<style scoped>
.search {
  width: 36%;
  min-width: 400px;
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
}
.el-cascader {
  width: 100%;
}
</style>